//调查问卷案例

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './Questionnaire.css';
import {Input, Radio, Button,} from 'antd';
import $ from 'jquery';

// RadioGroup和options1-4是单选框
// 单选框部分开始
const RadioGroup = Radio.Group;
const options1 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
const options2 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
const options3 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
const options4 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
// 单选框部分结束
export default class Quset extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // value1-4是四个单选框
            value1: '0',
            value2: '1',
            value3: '1',
            value4: '0',
            // ajax传值
            data:[],
            yuanliao1:[
                '如：石灰石',
                '',
                '',
                '',
                '',
                '',
                '如：原煤',
            ],
            xiaohao1:[],
            yuanliao2:[
                '如：熟料',
                '天然石膏',
                '脱硫石膏',
            ],
            xiaohao2:[],
            shuzhi:[],
            paifang:[],
            chucheng:[],
            qingkuang:[],

        };
    }

    // onChange1-4是单选框的四个函数
    // 单选函数开始
    onChange1 = (e) => {
        console.log('radio1 checked', e.target.value);
        this.setState({
            value1: e.target.value,
        });
    }
    onChange2 = (e) => {
        console.log('radio2 checked', e.target.value);
        this.setState({
            value2: e.target.value,
        });
    }
    onChange3 = (e) => {
        console.log('radio3 checked', e.target.value);
        this.setState({
            value3: e.target.value,
        });
    }
    onChange4 = (e) => {
        console.log('radio4 checked', e.target.value);
        this.setState({
            value4: e.target.value,
        });
    }
    // 单选函数结束
    //ajax传值开始
    handlechange1=(event,i)=> {
        let newdata = this.state.data;
        newdata[i]=event.target.value;
        this.setState({
            data: newdata,
        });
        console.log(newdata);
    }
    handlechange2=(event,i)=> {
        let newdata = this.state.yuanliao1;
        newdata[i]=event.target.value;
        this.setState({
            yuanliao1: newdata,
        });
        console.log(newdata);
    }
    handlechange3=(event,i)=> {
        let newdata = this.state.xiaohao1;
        newdata[i]=event.target.value;
        this.setState({
            xiaohao1: newdata,
        });
        console.log(newdata);
    }
    handlechange4=(event,i)=> {
        let newdata = this.state.yuanliao2;
        newdata[i]=event.target.value;
        this.setState({
            yuanliao2: newdata,
        });
        console.log(newdata);
    }
    handlechange5=(event,i)=> {
        let newdata = this.state.xiaohao2;
        newdata[i]=event.target.value;
        this.setState({
            xiaohao2: newdata,
        });
        console.log(newdata);
    }
    //数值
    handlechange6=(event,i)=> {
        let newdata = this.state.shuzhi;
        newdata[i]=event.target.value;
        this.setState({
            shuzhi: newdata,
        });
        console.log(newdata);
    }
    //排放
    handlechange7=(event,i)=> {
        let newdata = this.state.paifang;
        newdata[i]=event.target.value;
        this.setState({
            paifang: newdata,
        });
        console.log(newdata);
    }
    //除尘
    handlechange8=(event,i)=> {
        let newdata = this.state.chucheng;
        newdata[i]=event.target.value;
        this.setState({
            chucheng: newdata,
        });
        console.log(newdata);
    }
    //情况
    handlechange9=(event,i)=> {
        let newdata = this.state.qingkuang;
        newdata[i]=event.target.value;
        this.setState({
            qingkuang: newdata,
        });
        console.log(newdata);
    }
    handleSubmit(event) {
        event.preventDefault();
        var formData = new FormData($("#form-add")[0]);
        $.ajax({
            type: 'post',
            url : "/addCase",
            data: formData ,
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.status == "1") {
                    alert("上传成功！"+data);
                }
                if (data.status == "error") {
                    alert(data.msg);
                }

            }
        });
    }
    // ajax传值结束
    render() {
        //定义input的value数组
        const {
            data,
            yuanliao1,
            xiaohao1,
            yuanliao2,
            xiaohao2,
            shuzhi,
            paifang,
            chucheng,
            qingkuang,
        } = this.state;

        return (
            <form id="form-add" onSubmit={this.handleSubmit}>
                <div className="first">
                    <h2 style={{textAlign: 'center'}}>水泥企业信息调研表</h2><br/>
                    <table className="table5">
                        <th>企业名称：</th>
                        <td style={{width: '26%',textdecoration:'underline'}}>
                            华盛天涯
                        </td>
                        <th>生产线名称：</th>
                        <td style={{width: '14%'}}>
                            天津院

                        </td>
                        <th>生产线设计规模：</th>
                        <td>
                            12148
                        </td>
                        <th>年运转天数：</th>
                        <td>
                            266
                        </td>
                    </table>
                    <table className="table6">
                        <tr>
                            <th>企业所在地址：</th>
                            <td style={{width: '48%'}}>
                                湖北省武汉市洪山区
                            </td>
                            <th>填表联系人：</th>
                            <td>
                                程序员1号
                            </td>
                            <th>联系电话：</th>
                            <td>
                                15698982323
                            </td>
                        </tr>
                    </table>
                </div>
                <div className="second">
                    <table border="3" className="table1">
                        <tr>
                            <th rowSpan='8' style={{width: '2%'}}>资<br/>源<br/>消<br/>耗</th>
                            <th rowSpan='2' style={{width: '10%'}}>类别</th>
                            <th colSpan='6'>熟料烧成用原材料（含替代原料）</th>
                            <th colSpan='3'>燃料(含替代燃料)</th>
                            <th rowSpan='3' style={{width: '5%'}}>熟料<br/>产量</th>
                        </tr>
                        <tr>
                            <td>原料1</td>
                            <td>原料2</td>
                            <td>原料3</td>
                            <td>原料4</td>
                            <td>原料5</td>
                            <td>原料6</td>
                            <td>燃料1</td>
                            <td>燃料2</td>
                            <td>燃料3</td>
                        </tr>
                        <tr>
                            <th>原材料名称</th>
                            <td>R2O</td>
                            <td>SiO2</td>
                            <td>Al2O3</td>
                            <td>Fe2O3</td>
                            <td>MgO</td>
                            <td>CaO</td>
                            <td>KH</td>
                            <td>SM</td>
                            <td>IM</td>
                        </tr>
                        <tr>
                            <th>消耗情况，万吨/年</th>
                            <td>13.16</td>
                            <td>2.86</td>
                            <td>1.54</td>
                            <td>43.20</td>
                            <td>1.86</td>
                            <td>0.44</td>
                            <td>1.001</td>
                            <td>3.05</td>
                            <td>1.88</td>
                            <td>0.66</td>
                        </tr>
                        <tr>
                            <th rowSpan='2'>类别</th>
                            <th colSpan='9'>水泥制成用原材料（含替代原料）</th>
                            <th rowSpan='3'>水泥<br/>产量</th>
                        </tr>
                        <tr>
                            <td>原料1</td>
                            <td>原料2</td>
                            <td>原料3</td>
                            <td>原料4</td>
                            <td>原料5</td>
                            <td>原料6</td>
                            <td>原料7</td>
                            <td>原料8</td>
                            <td>原料9</td>
                        </tr>
                        <tr>
                            <th>原材料名称</th>
                            <td>Al2O3</td>
                            <td>R2O</td>
                            <td>CaO</td>
                            <td>SM</td>
                            <td>MgO</td>
                            <td>SiO2</td>
                            <td>Fe2O3</td>
                            <td>KH</td>
                            <td>IM</td>
                        </tr>
                        <tr>
                            <th>消耗情况，万吨/年</th>
                            <td>1</td>
                            <td>2</td>
                            <td>55.55</td>
                            <td>43.20</td>
                            <td>222</td>
                            <td>333</td>
                            <td>23</td>
                            <td>666</td>
                            <td>1.86</td>
                            <td>2.33</td>
                        </tr>
                    </table>
                    <table border="3" className="table2">
                        <tr>
                            <th rowSpan='3'>能源消耗</th>
                            <th>项目</th>
                            <th>生料粉磨<br/>工段电耗</th>
                            <th>可比熟料<br/>综合煤耗</th>
                            <th>可比熟料<br/>综合电耗</th>
                            <th>可比熟料<br/>综合能耗</th>
                            <th>可比水泥<br/>综合电耗</th>
                            <th>可比水泥<br/>综合能耗</th>
                            <th>单位熟料<br/>余热发电量</th>
                        </tr>
                        <tr>
                            <th>单位</th>
                            <td>kWh/t</td>
                            <td>kgce/t</td>
                            <td>kWh/t</td>
                            <td>kgce/t</td>
                            <td>kWh/t</td>
                            <td>kgce/t</td>
                            <td>kWh/t</td>
                        </tr>
                        <tr>
                            <th>数值</th>
                            <td>3.11</td>
                            <td>3.21</td>
                            <td>1.2</td>
                            <td>5.11</td>
                            <td>6.11</td>
                            <td>2.311</td>
                            <td>4</td>
                        </tr>
                    </table>
                    <table border="3" className="table3">
                        <tr>
                            <th rowSpan='5'>废气排放</th>
                            <th rowSpan='2'>项目</th>
                            <th colSpan='5'>颗粒物</th>
                            <th>SO2</th>
                            <th>NOX</th>
                            <th>喷氨</th>
                            <th colSpan='3'>脱硝工艺(划勾)</th>
                        </tr>
                        <tr>
                            <th>窑头</th>
                            <th>窑尾</th>
                            <th>水泥磨</th>
                            <th>煤磨</th>
                            <th>包装机*</th>
                            <th>窑尾</th>
                            <th>窑尾</th>
                            <th>kg/t熟料</th>
                            <th style={{width: '3%'}}>1</th>
                            <th>SNCR</th>
                            <th><RadioGroup options={options1} onChange={this.onChange1} value={this.state.value1}/>
                            </th>
                        </tr>
                        <tr>
                            <th>年排放量，吨/年</th>
                            <td>2</td>
                            <td>383</td>
                            <td>27</td>
                            <td>3563</td>
                            <td>223</td>
                            <td>311</td>
                            <td>1231</td>
                            <th rowSpan='2'>13</th>
                            <th>2</th>
                            <th>分级燃烧</th>
                            <th><RadioGroup options={options2} onChange={this.onChange2} value={this.state.value2}/>
                            </th>
                        </tr>
                        <tr>
                            <th>排放浓度，mg/m3</th>
                            <td>32</td>
                            <td>13</td>
                            <td>62</td>
                            <td>163</td>
                            <td>33</td>
                            <td>423</td>
                            <td>26</td>
                            <th>3</th>
                            <th>1+2</th>
                            <th><RadioGroup options={options3} onChange={this.onChange3} value={this.state.value3}/>
                            </th>
                        </tr>
                        <tr>
                            <th>除尘方式（电/袋)</th>
                            <td>20</td>
                            <td>33</td>
                            <td>11</td>
                            <td>50</td>
                            <td>44</td>
                            <td>77</td>
                            <td>88</td>
                            <td>10</td>
                            <th>4</th>
                            <th>其它</th>
                            <th><RadioGroup options={options4} onChange={this.onChange4} value={this.state.value4}/>
                            </th>
                        </tr>
                    </table>
                    <table border="3" className="table4">
                        <tr>
                            <th rowSpan='3'>主要设备</th>
                            <th rowSpan='2'>设备名称</th>
                            <th colSpan='3'>生料磨</th>
                            <th>窑</th>
                            <th colSpan='3'>水泥磨</th>
                        </tr>
                        <tr>
                            <th>粉磨方式</th>
                            <th>规格型号</th>
                            <th>数量</th>
                            <th>规格</th>
                            <th>粉磨方式</th>
                            <th>规格型号</th>
                            <th>数量</th>
                        </tr>
                        <tr>
                            <th>设备情况</th>
                            <td>良好</td>
                            <td>一般</td>
                            <td>优秀</td>
                            <td>良好</td>
                            <td>良好</td>
                            <td>一般</td>
                            <td>优秀</td>
                        </tr>
                    </table>
                </div>
                <p>*备注：若无该数据计算值，可空缺。</p>
            </form>
        )
    }
}
